<template>
  <div class="app-container">
    <div v-if="userInfo">
      <el-row :gutter="20">
        <el-col :span="9" :xs="24">
          <user-card @changeTab="changeTab" @hasTab="hasTab" :show_info_base="show_info_base"
            :show_info_auth="show_info_auth" :show_info_ICBC="show_info_ICBC" />
        </el-col>
        <el-col :span="15" :xs="24">
          <el-card>
            <el-tabs v-model="activeTab">
              <el-tab-pane label="企业认证信息" v-if="show_info_auth" name="Identification">
                <Identification />
              </el-tab-pane>
              <!-- <el-tab-pane label="结算账户信息" v-if="show_info_ICBC" name="ICBC">
                <ICBC/> -->
                <!-- v-if="userInfo.authType ===1" -->
                <!-- <ICBCPersonal v-else /> -->
              <!-- </el-tab-pane> -->
              <el-tab-pane label="个人信息" name="User">
                <User />
              </el-tab-pane>
              <!-- <el-tab-pane label="企业基本信息" v-if="show_info_base" name="Company">
                <Company />
              </el-tab-pane> -->
            </el-tabs>
          </el-card>
        </el-col>

      </el-row>
    </div>
  </div>
</template>

<script>
  import {mapGetters} from 'vuex'
  import UserCard from './components/UserCard'
  import User from './components/User'
  import Company from './components/Company'
  import Identification from './components/Identification'
  import merge from 'webpack-merge';
  import ICBC from './components/ICBC.vue'
  import ICBCPersonal from './components/ICBCPersonal.vue'
  export default {
    name: 'Profile',
    components: {
      UserCard,
      User,
      Company,
      Identification,
      ICBC,
      ICBCPersonal
    },
    data() {
      return {
        activeTab: 'User',
        show_info_base: false,
        show_info_auth: false,
        show_info_ICBC: false,
      }
    },
    computed: {
      ...mapGetters(['userInfo'])
    },
    watch: {
      $route: {
        immediate: true,
        handler(val) {
          if (val.matched) {
            const name = val.fullPath.split('name=')[1]
            this.changeTab(name);
          }
        },
      },
      activeTab(val) {
        // if (val === 'User') {
        //   this.$router.push('/profile/index')
        // } else {
        //   this.$router.push(`/company/info/name=${val}`)
        // }
      }
    },
    created() {
      console.log(this.$store);
      this.show_info_base = this.hasTab('info_base')
      this.show_info_auth = this.hasTab('info_auth')
      this.show_info_ICBC = this.hasTab('info_ICBC')
    },
    methods: {
      changeTab(name) {
        if (this.activeTab === name || !name) return
        this.activeTab = name;
      },
      hasTab(code) {
        if (code) {
          const myMenu = this.$store.getters && this.$store.getters.permission_myMenu;
          if (
            myMenu &&
            myMenu.length > 0) {
            let findValue = false;
            myMenu.some(item => {
              if (item.code === code) {
                findValue = true;
                return true;
              }
            })
            return findValue;
          } else {
            return false;
          }
        } else {
          return true;
        }
      }
    }
  }
</script>
